<template>
  <div class="personalDetails">
      
      <el-form ref="form" :model="form" label-width="80px" :disabled="showOk">
        <div class="formLeft">
            <el-form-item label="学号">
              <el-input v-model="form.loginCode" class="personalForm_One"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.empName" class="personalForm_One"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.empSex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出身年月">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 200px;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="form.college" class="personalForm_One"></el-input>
            </el-form-item>
            <el-form-item label="班别">
              <el-input v-model="form.empClass" class="personalForm_One"></el-input>
            </el-form-item>
        </div>
        
        <div class="formRight">
          <el-form-item label="身份证号">
            <el-input v-model="form.idNum" class="personalForm_One"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.telephone" class="personalForm_One"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input type="textarea" v-model="form.address" class="personalForm_Two"></el-input>
          </el-form-item>
          <el-form-item v-show="isDisplay">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancelBtn">取消</el-button>
          </el-form-item>
        </div>
      </el-form>
       <el-button type="primary" round @click="amendMessage" :disabled="showYes">修改个人信息</el-button>

  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
      return {
        roleID: userInfo.roles,
        userId:userInfo.empId,
        form: {
          loginCode: '',
          empName: '',
          empSex: '',
          birthday: '',
          college: '',
          empClass: '',
          idNum: '',
          telephone: '',
          address: '',
        },
        newForm:{},
        qwe: 1,
        showYes: false,
        showOk: true,
        isDisplay: false,
      }
    },

  methods: {
      // 点击修改个人信息按钮
      amendMessage() {
        var self = this;
        self.showOk = !self.showOk;
        self.isDisplay = !self.isDisplay;
      },

      // 保存
      onSubmit() {
        var self = this;
        axiosRequest("post","/emp/save",self.form).then((res) => {
          if (res.data.code === 200) {
              self.$message.success(res.data.data);
            } else {
              self.$message.error(res.data.data);
            }
        });
      },

      // 点击取消
      cancelBtn() {
        var self = this;
        self.form = self.newForm;
        self.showOk = !self.showOk;
        self.isDisplay = !self.isDisplay;
      },
  },

  mounted: function () {
    var self = this;
    
    //修改个人按钮的禁用或者启用
    if(self.roleID[0] == 1){
            self.showYes = !self.showYes;
    }else {
        self.showYes = false;
    }
    
    // 请求后台拿到个人数据
    axiosRequest("get","/emp/"+self.userId).then((res) => {
      if (res.data.code === 200) {
          // console.log(res.data.data);
          self.form = JSON.parse(JSON.stringify(res.data.data));
          self.newForm = res.data.data;
          // console.log(self.newForm,self.qwe);
        } else {
          self.$message.error(res.data.data);
        }
    });
  },
}
</script>

<style lang="less" scoped>
.personalDetails{
   padding: 1%;
}

.el-form {
  width: calc(100% - 100px);
  display: flex;
  justify-content: space-between;
}

.formLeft {
  width: calc(100% - 740px);
  min-width: 380px;
}

.formRight {
  width: calc(100% - 740px);
  min-width: 380px;
}

.personalForm_One {
  width: 100%;
}

.personalForm_Two {
  width: 100%;
  height: 100px !important;
}


</style>
